<template>
    <el-row style="padding: 0 0 0 3rem;">
        <el-col :span="5">
            <el-card shadow="always">
                <el-statistic :value="268500" >
                    <template #title>
                        <div style="display: inline-flex; align-items: center;font-size: 20px;">
                            当前登录用户
                        </div>
                    </template>
                </el-statistic>
                <div class="statistic-footer">
                    <div class="footer-item">
                        <span>较昨日</span>
                        <span class="green">
              24%
              <el-icon>
                <CaretTop />
              </el-icon>
            </span>
                </div>
            </div>
            </el-card>
        </el-col>
        <el-col :span="1"></el-col>
        <el-col :span="5">
            <el-card shadow="always">
            <el-statistic :value="138">
                <template #title>
                    <div style="display: inline-flex; align-items: center;font-size: 20px;">
                        女性占比
                        <el-icon style="margin-left: 4px" :size="12">
                            <Female />
                        </el-icon>
                    </div>
                </template>
                <template #suffix>/100</template>
            </el-statistic>
                <div class="statistic-footer">
                    <div class="footer-item">
                        <span>较上月</span>
                        <span class="red">
                          12%
                          <el-icon>
                            <CaretBottom />
                          </el-icon>
                        </span>
                    </div>
                </div>
            </el-card>
        </el-col>
        <el-col :span="1"></el-col>
        <el-col :span="5">
            <el-card shadow="always">
                <el-statistic :value="172000" >
                    <template #title>
                        <div style="display: inline-flex; align-items: center;font-size: 20px;">
                            总转换量
                        </div>
                    </template>
                </el-statistic>
                <div class="statistic-footer">
                    <div class="footer-item">
                        <span>较昨日</span>
                        <span class="green">
                        16%
                          <el-icon>
                            <CaretTop />
                          </el-icon>
                        </span>
                    </div>
                </div>
            </el-card>
        </el-col>
        <el-col :span="1"></el-col>
        <el-col :span="5">
            <el-card shadow="always">
            <el-statistic :value="562" >
                <template #title>
                    <div style="display: inline-flex; align-items: center;font-size: 20px;">
                        反馈数量
                    </div>
                </template>
                <template #suffix>
                    <el-icon style="vertical-align: -0.125em">
                        <ChatLineRound />
                    </el-icon>
                </template>
            </el-statistic>
                <div class="statistic-footer">
                        <span>较昨日</span>
                        <span class="green">
                          16%
                          <el-icon>
                            <CaretTop />
                          </el-icon>
                        </span>
                </div>
            </el-card>
        </el-col>
    </el-row>
    <el-divider style="height:1%;margin: 20px 0 0px 0"/>
    <el-row>
        <el-col :span="12">
            <div ref="ec2" style="height:100%;width: 100%;padding:5px;border-left:1px solid #eee">
                <div class="demo-progress">
                    <el-progress type="dashboard" class="progress" :percentage="80" >
                        <template #default="{ percentage }">
                        <span class="percentage-value">80%</span>
                        <span class="percentage-label">处理进度</span>
                    </template>
                    </el-progress>
                    <el-progress type="dashboard" class="progress" :percentage="80" status="success" >
                        <template #default="{ percentage }">
                            <span class="percentage-value">80%</span>
                            <span class="percentage-label">处理进度</span>
                        </template>
                    </el-progress>
                    <el-progress type="dashboard" class="progress" :percentage="90" status="warning" >
                        <template #default="{ percentage }">
                            <span class="percentage-value">90%</span>
                            <span class="percentage-label">处理进度</span>
                        </template>
                    </el-progress>
                    <el-progress type="dashboard" class="progress" :percentage="90" status="exception" >
                        <template #default="{ percentage }">
                            <span class="percentage-value">90%</span>
                            <span class="percentage-label">处理进度</span>
                        </template>
                    </el-progress>
                </div>
                <el-descriptions
                        title="作者信息"
                        style="margin-top: 30px"
                        direction="vertical"
                        :column="4"
                        :size="size"
                        border
                >
                    <el-descriptions-item label="用户名">程序尤八哥</el-descriptions-item>
                    <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
                    <el-descriptions-item label="位置" :span="2">北京</el-descriptions-item>
                    <el-descriptions-item label="备注">
                        <el-tag size="small">gitee</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="详细地址">
                        https://gitee.com/youbuger
                    </el-descriptions-item>
                </el-descriptions>
            </div>
        </el-col>
        <el-col :span="12">
            <el-timeline>
                <el-timeline-item timestamp="2023/12/25" placement="top">
                    <el-card>
                        <h4>修改登录主页</h4>
                        <p>提交 2018/4/12 20:46</p>
                    </el-card>
                </el-timeline-item>
                <el-timeline-item timestamp="2023/12/24" placement="top">
                    <el-card>
                        <h4>修改登录主页</h4>
                        <p>提交 2023/12/24</p>
                    </el-card>
                </el-timeline-item>
                <el-timeline-item timestamp="2023/12/24" placement="top">
                    <el-card>
                        <h4>升级ElementPlus到2.2.30</h4>
                        <p>提交 2023/12/24 20:46</p>
                    </el-card>
                </el-timeline-item>
                <el-timeline-item timestamp="2023/12/24" placement="top">
                    <el-card>
                        <h4>初始化项目</h4>
                        <p>提交 2023/12/24</p>
                    </el-card>
                </el-timeline-item>
            </el-timeline>
        </el-col>
    </el-row>
</template>

<script setup>
    import { ChatLineRound, Female } from '@element-plus/icons-vue'
    import request from '@/utils/request.js'
    import {ref, reactive, onMounted, computed} from 'vue'
    import * as echarts from 'echarts'
    let ec = ref(null)
    let ec2 = ref(null)
    let ec3 = ref(null)
    let textAnsmts = reactive([])
    let imageAnsmts = reactive([])
    let statistics = {
        countData:{xData:null, yData:null},
        businessPercentDatas:null,
        satisfyData:100,
    }
    let form =ref({})
    onMounted(function () {
        request.post("/api/common/getAnsmts", {pageSize:10, currentPage:1, type:'text', valid:1}).then(resp => {
            textAnsmts.splice(0, textAnsmts.length)
            textAnsmts.push(...resp.records)
        })
        request.post("/api/common/getAnsmts", {pageSize:10, currentPage:1, type:'image', valid:1}).then(resp => {
            imageAnsmts.splice(0, imageAnsmts.length)
            imageAnsmts.push(...resp.records)
        })
        request.get("/api/common/getStatistics").then(resp => {
            statistics.countData.xData =  resp.countData.xData;
            statistics.countData.yData = resp.countData.yData;
            statistics.businessPercentDatas = resp.businessPercentDatas
            statistics.satisfyData  = resp.satisfyData

            // 基于准备好的dom，初始化echarts实例
            var lineGraphs = echarts.init(ec.value);
            var pieCharts = echarts.init(ec2.value);
            var persent = echarts.init(ec3.value);
            // 绘制图表
            let lineGraphsOption = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: statistics.countData.xData || ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: statistics.countData.yData || [150, 230, 224, 218, 135, 147, 260],
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }
                ]
            };
            let pieChartsOption = {
                title: {
                    text: '近七日业务占比',
                    subtext: '统计数据',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '业务占比',
                        type: 'pie',
                        radius: '50%',
                        data: statistics.businessPercentDatas||[
                            { value: 3, name: '咨询' },
                            { value: 3, name: '投诉' },
                            { value: 3, name: '表扬' },
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            let persentOption = {
                tooltip: {
                    formatter: '{a} <br/>{b} : {c}%'
                },
                series: [
                    {
                        name: '满意度',
                        type: 'gauge',
                        progress: {
                            show: true
                        },
                        detail: {
                            valueAnimation: true,
                            formatter: '{value}'
                        },
                        data: [
                            {
                                value: statistics.satisfyData || 100,
                                name: '近七日平均满意度'
                            }
                        ]
                    }
                ]
            };
            lineGraphsOption && lineGraphs.setOption(lineGraphsOption);
            pieChartsOption && pieCharts.setOption(pieChartsOption);
            persentOption && persent.setOption(persentOption);
        })

    })
    const publicMsgs = ref(["公告1","公告2","公告3",
        "公告4","公告6","公告7",])

    const load = () => {

    }
    function openLink(link) {
        if(link !== ''&&link != null){
            window.open(link)
        }
    }
    const percentage = ref(70)
    const duration = computed(() => Math.floor(percentage.value / 10))

    const increase = () => {
        percentage.value += 10
        if (percentage.value > 100) {
            percentage.value = 100
        }
    }
    const decrease = () => {
        percentage.value -= 10
        if (percentage.value < 0) {
            percentage.value = 0
        }
    }
</script>

<style scoped>
    .infinite-list {
        height: 300px;
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .infinite-list .infinite-list-item {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
        background: var(--el-color-primary-light-9);
        margin: 10px;
        color: var(--el-color-primary);
        transition: height 0.3s;
    }
    .infinite-list .infinite-list-item + .list-item {
        margin-top: 10px;
    }

    .infinite-list-item:hover{
        height: 60px;
    }

    #toDoList::-webkit-scrollbar {
        width: 4px;
    }
    #toDoList::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        opacity: 0.2;
    }
    #toDoList::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 0;
    }
    .el-col {
        text-align: center;
    }

    .statistic-footer {
        text-align: center;
        font-size: 14px;
        color: var(--el-text-color-regular);
        margin-top: 16px;
    }
    .green{
        color:blue;
    }
    .red{
        color:red;
    }
    .demo-progress{
        display: flex;
    }
    .progress{
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 25%;
    }
    .demo-progress-bar{
        margin-top:20px;
        width: 100%;
    }
    .demo-progress-bar .el-progress--line {
        margin-bottom: 15px;
        width: 100%;
    }
    .percentage-value {
        display: block;
        margin-top: 10px;
        font-size: 28px;
    }
    .percentage-label {
        display: block;
        margin-top: 10px;
        font-size: 12px;
    }
</style>
